<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Flex自适应浏览器弹性布局，开发酷狗音乐播放列表</title>
    <style>
        body {
            margin: 0px;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .container {
            width: 100%;
            height: 600px;
            background-color: aqua;
            margin-top: 50px;
            display: flex;
            /*当容器里面的内容放不下了，那么我们就换行进行显示，这个不是默认的*/
            flex-wrap: wrap;
        }

        .container .item:nth-child(odd) {
            background-color: antiquewhite;
        }

        .container .item {
            width: 25%;
            display: flex;
            justify-content: center;

        }

        .container .item .item-con {
            width: 150px;
            border: 1px solid #ddd;
            display: flex;
            flex-direction: column;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">
            <div class="item-con">
                <a href="#" class="item-con-img">
                    <img src="/images//flex-01.jpg" alt="" class="img">
                    <span><img src="images/icon-play.png" alt="" width="14">2444.万</span>
                </a>
                <a href="" class="item-con-ti">
                    催眠：Delta脑波音乐减压深度睡眠
                </a>
            </div>
        </div>
        <div class="item">
            <div class="item-con">2</div>
        </div>
        <div class="item">
            <div class="item-con">3</div>
        </div>
        <div class="item">
            <div class="item-con">4</div>
        </div>
        <div class="item">
            <div class="item-con">5</div>
        </div>
        <div class="item">
            <div class="item-con">6</div>
        </div>
        <div class="item">
            <div class="item-con">7</div>
        </div>
        <div class="item">
            <div class="item-con">8</div>
        </div>


    </div>

</body>

</html>